<template>
  <div class="flex" :class="classes" :style="style">
    <div class="label px-1 box-border text-red-800 font-bold flex justify-center items-center" :style="labelStyle">
      {{label}}
    </div>
    <input :value="value || modelValue" @input="onInput" class="bg-transparent flex-1" style="min-width: 5px;">
  </div>
</template>

<script setup>
const emits = defineEmits([
    'update:modelValue'
])

const props = defineProps({
  value: null,
  modelValue: null,
  style: null,
  classes: null,
  labelStyle: {},
  label: {
    type: String,
    default: () => ''
  }
})

const onInput = (event) => {
  emits('update:modelValue', event.target.value)
}
</script>

<style scoped>

</style>